<template>
  <div class="container b-container" id="b-container">
    <form class="form" @submit.prevent="login">
      <h2 class="form_title title">用户登陆</h2>
      <input class="form__input" type="text" placeholder="请输入用户名" v-model="username" />
      <input class="form__input" type="password" placeholder="请输入密码" v-model="password" />
      <a class="form__link" href="#">Forgot your password?</a>
      <button class="form__button button">登陆</button>
    </form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { validateUsername, validatePassword } from '@/utils/validation';
import { messages,showWarningMessage } from "@/utils/message";
export default defineComponent({
  emits: ['submit'],
  setup(props,{emit}) {
    const username = ref('');
    const password = ref('');
    const resetField=()=>{
      username.value="";
      password.value="";
    };
    const login = () => {
      // 表单验证
      if (username.value==""||password.value=="") {
        showWarningMessage(messages.validationFailure.empty)
        resetField();
        return;
      }
      if (!validateUsername(username.value)) {
        showWarningMessage(messages.validationFailure.username)
        resetField();
        return;
      }
      if (!validatePassword(password.value)) {
        showWarningMessage(messages.validationFailure.password)
        resetField();
        return;
      }
      emit('submit', { username: username.value, password: password.value });
    };

    return {
      username,
      password,
      login,
    };
  },
});
</script>

<style lang="less" scoped>
@import '@/assets/css/user.less';
</style>
